<template>
    <view class="container">
        <view class="vehicle-info-card">
            <!--顶部 -->
            <view class="vehicle-details">
                <view class="info-section">
                    <view class="info-item">
                        <text class="info-title">检查事项</text>
                        <text class="info-content">检查事项</text>
                    </view>
                    <view class="info-item">
                        <text class="info-title">发起人员</text>
                        <text class="info-content">发起人员</text>
                    </view>
                    <view class="info-item">
                        <text class="info-title">检查人员</text>
                        <text class="info-content">检查人员</text>
                    </view>
                    <view class="info-item">
                        <text class="info-title">检查对象</text>
                        <text class="info-content">检查对象</text>
                    </view>
                    <view style="margin-top: 20px">
                        <span class="span-class">当前：存档办结</span>
                    </view>
                    <view class="label-class">
                        <label @click="clickMethods(1)">
                            <img src="./img/process_1_1.png"/>
                            <br/>
                            <label>监督检查接收</label>
                        </label>
                        <label>
                            <img class="icon_arrow_img" src="./img/icon_arrow_right.png"/>
                        </label>
                        <label @click="clickMethods(2)">
                            <img src="./img/process_2_2.png"/>
                            <br/>
                            <label>检查登记</label>
                        </label>
                    </view>
                    <view>
                        <label>
                            <img style="margin-left: 270px" class="icon_arrow_img" src="./img/icon_arrow_down.png"/>
                        </label>
                    </view>
                    <view class="label-class">
                        <label @click="clickMethods(3)">
                            <img src="./img/process_4_2.png"/>
                            <br/>
                            <label>存档办结</label>
                        </label>
                        <label>
                            <img class="icon_arrow_img" src="./img/icon_arrow_left.png"/>
                        </label>
                        <label @click="clickMethods(4)">
                            <img src="./img/process_5_2.png"/>
                            <br/>
                            <label>检查整改</label>
                        </label>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
  export default {
    data() {
      return {
      };
    },
    mounted() {
    },
    computed: {},
    methods: {
      clickMethods(item) {
        let id = 1;
        if (item === 1) {
          uni.redirectTo({
            url: "/pages/hub_ygzw/supervision/processingRecordsQuery/receiveDetails?id=" + id,
          });
        } else if (item === 2) {
          uni.redirectTo({
            url: "/pages/hub_ygzw/supervision/processingRecordsQuery/registrationDetails?id=" + id,
          });
        } else if (item === 3) {
          uni.showToast({
            title: '当前已完结',
            icon: 'none'
          })
        } else if (item === 4) {
          uni.redirectTo({
            url: "/pages/hub_ygzw/supervision/processingRecordsQuery/correctionDetails?id=" + id,
          });
        }
      }
    },
  };
</script>

<style scoped lang="scss">
    .container {
        padding: 10px;
        background: #f3f6fa;
        height: 100vh;

        .vehicle-info-card {
            background-color: white;
            padding: 10px;
            border-radius: 10px;
            margin-bottom: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    }

    .vehicle-details {
        border-radius: 8px;
        margin-bottom: 20px;
    }

    /* 信息展示区域样式 */
    .info-section {
        background-color: #fff;
        border-radius: 12px;
        padding: 15px;

        .info-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }

        .info-title {
            color: #79829c;
            font-size: 16px;
        }

        .info-content {
            color: #0d1444;
            font-size: 16px;
        }

        .span-class {
            color: #79829c;
            font-size: 16px;
        }

        .label-class {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
        }

        .icon_arrow_img {
            margin-top: 20px;
        }
    }
</style>
